const path = require('path')
//在vue-loder v15版本中引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//导入在内存中生成HTML页面的插件
//只要是插件，都一定要放到plugins 节点中去
//这个插件的两个作用
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
//这个文件其实就是一个js文件，通过node中的模块操作，向外部暴露了一个配置对象
module.exports = {
	//在配置文件中需要手动指定入口和出口
	entry:'./src/main.js',//入口表示，要使用的webpack打包那个文件
	output:{
		path:path.join(__dirname,'dist'),//指定打包好的文件，输出到那个目录中去
		filename:'bundle.js'//这是指定输出文件的名称
	},
	plugins:[//配置插件的节点
		new htmlWebpackPlugin({//创建一个在内存中生成HTML 页面的插件
			template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			filename:'index.html'//指定生成的页面的名称
		}),
		new VueLoaderPlugin()
	],
	module:{//这个几点，用于配置所有第三方模块加载器
		rules:[//所有第三方模块的匹配规则
			{test:/\.css$/,use:['style-loader','css-loader']},//匹配处理.css文件的第三方loader规则
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理.scss文件的第三方loader规则
			{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=3000&name=images/[hash:8][name].[ext]'},//处理图片路径的loader 
			//可以用？传参 limit给定的值，是图片的大小。单位是byte ，如果引用的图片大于或者等于给定的limit值，则不会被转为base64格式的字符串
			//如果图片小院给定的limit值，则会转换为base64的字符串，name表示编译后输出的名称  如果原名原格式输出（[name].[ext]），默认为了防止
			// 重命名会改变输出的名字
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//这是处理字体文件的loader
			{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级语法
			{test:/\.vue$/,use:'vue-loader'},//处理.vue文件的loader
			{test:/\.json$/,use:'json-loader'},
		]

	},
	resolve:{
		alias:{//设置Vue被导入时候的包的路径
			// "vue$":"vue/dist/vue.js"
		}
	},
}
//当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步
// 1. 首先，webpack发现 我们并没有通过命令的形式，给他指定入口和出口
// 2. webpack就会去项目的根目录中，查找一个叫做'webpack.config.js'的配置文件
// 3.当找到配置文件后，webpack会接卸执行这个配置文件，当解析执行完成之后，就得到了配置文件中，导出的配置对象
// 4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建；